<!-- 表格表单验证 
重点1 name="['equipmentList', 0, 'aaa']"
重点2 formRef.value.validate([['equipmentList', 0, 'aaa'], ['equipmentList', 1, 'aaa']])
-->

<template>
  <div class="step-equip-info-wp">
  	<a-form ref="formRef" :model="_d.form">
  		<a-table
				:columns="_d.tableHead" 
				:data-source="_d.form.equipmentList" 
				:pagination="false"
				bordered>
				<template #bodyCell="{ column, record, index }">
					<template v-if="column.dataIndex == 'actions'">
						<a-space>
							<a-button class="p-0" type="link" @click="saveTr(record, index)">保存</a-button>
						</a-space>
					</template>
					<template v-else-if="record.edit">
						<a-form-item 
							:name="['equipmentList',index,column.dataIndex]" 
							:rules="_d.rules[column.dataIndex] || []">
							<a-input v-model:value="record[column.dataIndex]" placeholder="请输入"/>
						</a-form-item>
					</template>
				</template>
				<template #footer>
					<div class="add-btn">
						<a-button @click="addTr()">
							<template #icon><plus-outlined/></template>
							<span>添加</span>
						</a-button>
					</div>
				</template>
			</a-table>
  	</a-form>
  </div>
</template>

<script setup>
	import { reactive, ref, computed, onMounted } from 'vue'
	import { Form, notification } from 'ant-design-vue';
	import { PlusOutlined } from '@ant-design/icons-vue';

	const formRef = ref();

	const _d = reactive({

		tdForm: {
			name: '', // 设备名称
			model: '', // 设备型号
		},

		form: {
			equipmentList: []
		},

		rules: {
			name: [
				{ required: true, trigger: 'change', message: '请输入设备名称' }
			],
			model: [
				{ required: true, trigger: 'change', message: '请输入设备型号' }
			],
		},

		tableHead: [
			{title: '设备名称', dataIndex: 'name', ellipsis: true},
			{title: '设备型号', dataIndex: 'model', ellipsis: true},
			{title: '操作', dataIndex: 'actions', width: 120, align: 'center', ellipsis: true},
		],
	})

	onMounted(() => {
	})

	// 添加
	function addTr() {
		let obj = Object.assign({}, _d.tdForm);
		obj.edit = true;
		_d.form.equipmentList.push(obj);
	}

	// 保存
	function saveTr(item, index) {
		let keys = [];
		for(let key in item) {
			keys.push(['equipmentList', index, key]);
		}
		formRef.value.validate(keys).then(() => {
			console.log('111')
		})
	}


</script>

<style lang="less" scoped>
.step-equip-info-wp {
	:deep(.ant-table) {
		.ant-table-footer {
			padding: 0;
		}
		.ant-form-item {
			margin-bottom: 0;
		}
	}
	.add-btn {
		padding: 16px;
		text-align: center;
	}
}
</style>